import React, { useState } from 'react';
import { Switch } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const QuotaQOQ = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const [ isShowArrow, setShowArrow ] = useState( ( config.style && config.style.isShowArrow === false ) ? false : true );

	const fontConfig = [
		'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic', 'AlignHor'
	];

	const onChange = ( checked: boolean ) => {
		setShowArrow( checked );
		form.setFieldsValue( { isShowArrow: checked } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>

			<FormItem label="指标字体" name="QOQLabelFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="QOQLabelFontFamily"
					fontSizeName="QOQLabelFontSize"
					fontColorName="QOQLabelFontColor"
					boldName="QOQLabelFontBold"
					italicName="QOQLabelFontItalic"
					alignHorName="QOQLabelAlignHor"
					fontConfig={ fontConfig }
				/>
			</FormItem>

			<FormItem label="值字体" name="QOQLalueFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="QOQValueFontFamily"
					fontSizeName="QOQValueFontSize"
					fontColorName="QOQValueFontColor"
					boldName="QOQValueFontBold"
					fontConfig={ fontConfig.slice( 0, 5 ) }
				/>
			</FormItem>

			<FormItem label="是否开启箭头" name="isShowArrow" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowArrow } onChange={ onChange }/>
			</FormItem>
		</div>
	);
};

export default React.memo( QuotaQOQ );
